<template>
  <div class="content">
    <div class="content-layout">
      <div class="content-layout-left">
        <div class="layout-item">
          <span class="span-btn">>></span>
        </div>
        <div class="layout-item">
          <el-button type="danger" @click="handleDel" :disabled="!ids.length">
            删除
          </el-button>
        </div>
        <div class="layout-item">
          <el-button type="warning" plain @click="handleClearAll">
            清空
          </el-button>
        </div>
      </div>
      <div class="content-layout-right">
        <el-input
          v-model="queryParams[searchSelected]"
          placeholder="请输入搜索词"
          class="input-with-select"
          style="width: 400px"
          @keyup.enter="getData"
        >
          <template #prepend>
            <el-select
              v-model="searchSelected"
              placeholder="请选择"
              style="width: 115px"
              @change="handleQueryParams"
            >
              <el-option label="登录地址" value="ipaddr" />
              <el-option label="用户名称" value="userName" />
            </el-select>
          </template>
          <template #append>
            <el-button :icon="Search" @click="getData" />
          </template>
        </el-input>
      </div>
    </div>
    <div class="content-body">
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" min-width="55" align="center" />
        <el-table-column label="访问编号" align="center" prop="infoId" />
        <el-table-column
          label="用户名称"
          align="center"
          prop="userName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="登录地址"
          align="center"
          prop="ipaddr"
          min-width="130"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="登录地点"
          align="center"
          prop="loginLocation"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="浏览器"
          align="center"
          prop="browser"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="操作系统" align="center" prop="os" />
        <el-table-column label="登录状态" align="center" prop="status">
          <template #default="scope">
            <el-tag :type="theStatus(scope.row.status).tagType">
              {{ theStatus(scope.row.status).name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作信息"
          align="center"
          prop="msg"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="登录日期"
          align="center"
          prop="loginTime"
          width="180"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <span>{{ scope.row.loginTime }}</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        layout="total, sizes, prev, pager, next"
        @pagination="getData"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from "vue";
import { list, delLogininfor, cleanLogininfor } from "@/api/monitor/logininfor";

import { ElMessage, ElMessageBox } from "element-plus";
import { Search } from "@element-plus/icons-vue";

// 查询参数
let queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
// 选择条件
let searchSelected = ref("");
// 列表数据
let tableData = ref([]);
// 分页总数
let total = ref(0);
let loading = ref(true);
// 待删除的项目编号列表
let ids = ref([]);

// 计算属性-操作状态
const theStatus = computed(() => (data) => {
  let result = {
    name: "",
    tagType: "",
  };
  switch (data) {
    case "0":
      result.name = "成功";
      result.tagType = "success";
      break;
    case "1":
      result.name = "失败";
      result.tagType = "danger";
      break;
    default:
      result.name = "其他";
      result.tagType = "";
  }
  return result;
});

onMounted(() => {
  getData();
});

/** 切换搜索的值 */
const handleQueryParams = (val) => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  };
  queryParams.value[val] = "";
};
/** 获取表格数据 */
const getData = () => {
  loading = true;
  list(queryParams.value).then((res) => {
    tableData.value = [...res.rows];
    total.value = res.total;
    loading = false;
  });
};
/** 多选选中 */
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.infoId);
};
/** 删除 */
const handleDel = () => {
  ElMessageBox.confirm("确定要删除编号为" + ids.value + "的数据吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delLogininfor(ids.value);
    })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功！",
      });
      getData();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除取消！",
      });
    });
};
/** 清空 */
const handleClearAll = () => {
  ElMessageBox.confirm("确定要清空全部数据吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      cleanLogininfor();
    })
    .then(() => {
      ElMessage({
        type: "success",
        message: "清空成功！",
      });
      getData();
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
</style>
